<template>
    <div class="cmt_container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论内容(想写啥就写啥)"></textarea>
        <mt-button type="primary" size="large">发表评论</mt-button>
        <div class="cmt_comment">
            <div class="cmt_item" v-for="(item, index) in comments" :key="index">
                <div class="cmt_title">
                    第{{index + 1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;
                    发表时间:{{item.add_time | datafilter}}
                </div>
                <div class="cmt_body">
                  {{item.content}}
                </div>
            </div>
            
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  props:["id"],
  data(){
      return{
         pageIndex:1,
         comments:[]
      }
  },
  created(){
    this.getComment()
  },
  methods:{
      getComment(){
          this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex).then(result => {
              
              if(result.body.status === 0){
                  this.comments = result.body.message

              }else{
                  Toast('获取评论信息失败')
              }
          })
      },
      getMore(){
          this.pageIndex++
          this.getComment()
          this.comments = this.comments.concat(result.body.message)
      }
  }
}
</script>

<style>
.cmt_container .cmt_comment{
    margin: 10px 0;
}
.cmt_comment{
    font-size: 12px;
}
</style>

